<template>
    <div
        class="full-screen-container  min-h-screen bg-gradient-to-b from-blue-50 to-white flex items-center justify-center">
        <div class="w-full max-w-6xl flex rounded-xl overflow-hidden shadow-2xl bg-white">
            <!-- 左侧部分 -->
            <div class="w-1/2 gradient-bg p-16 flex flex-col items-center justify-center relative">
                <div class="absolute top-0 left-0 w-full h-full opacity-10">
                    <div class="absolute top-10 left-10 w-20 h-20 bg-blue-500 rounded-full animate-float delay-100"></div>
                    <div class="absolute bottom-20 right-10 w-16 h-16 bg-blue-400 rounded-full animate-float delay-300">
                    </div>
                    <div class="absolute top-1/2 left-1/3 w-12 h-12 bg-blue-300 rounded-full animate-float delay-500"></div>
                </div>
                <img src="https://ai-public.mastergo.com/ai/img_res/de89bb190ac5d4728200373cf7549b11.jpg"
                    alt="Security Icon" class="w-32 h-32 mb-8 animate-float" />
                <h2 class="text-4xl font-bold text-blue-800 mb-4">重置密码</h2>
                <p class="text-blue-600 text-lg mb-8 text-center leading-relaxed">
                    我们将帮助您重新获得账号访问权限
                    <br />
                    请按照以下步骤操作
                </p>
                <div class="space-y-6 w-full max-w-sm">
                    <div class="flex items-center text-blue-700">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                            <i class="iconfont icon-youxiang absolute" style="font-size: 1.4rem;"></i>
                        </div>
                        <span>验证邮箱身份</span>
                    </div>
                    <div class="flex items-center text-blue-700">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                            <i class="iconfont icon-yanzhengma absolute" style="font-size: 1.4rem;"></i>
                        </div>
                        <span>输入验证码</span>
                    </div>
                    <div class="flex items-center text-blue-700">
                        <div class="w-8 h-8 rounded-full bg-blue-100 flex items-center justify-center mr-4">
                            <i class="iconfont icon-yuechi absolute" style="font-size: 1.4rem;"></i>
                        </div>
                        <span>设置新密码</span>
                    </div>
                </div>
            </div>

            <!-- 右侧表单部分 -->
            <div class="w-1/2 bg-white p-16">
                <div class="max-w-md mx-auto">
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">重置密码</h1>
                    <p class="text-gray-500 mb-8">请填写以下信息以重置您的密码</p>
                    <form @submit.prevent="handleSubmit" class="space-y-6">
                        <!-- 邮箱地址 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">邮箱地址</label>
                            <div class="relative">
                                <div class="absolute left-4 top-1/2 transform -translate-y-1/2">
                                    <i class="iconfont icon-youxiang" style="font-size: 1rem;"></i>
                                </div>
                                <input v-model="formData.email" type="email"
                                    class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-200"
                                    placeholder="请输入邮箱地址" />
                            </div>
                        </div>

                        <!-- 验证码 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">验证码</label>
                            <div class="flex gap-4">
                                <div class="relative flex-1">
                                    <div class="absolute left-4 top-1/2 transform -translate-y-1/2">
                                        <i class="iconfont icon-yanzhengma" style="font-size: 1rem;"></i>
                                    </div>
                                    <input v-model="formData.verificationCode" type="text"
                                        class="w-full pl-12 pr-4 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-200"
                                        placeholder="请输入验证码" />
                                </div>
                                <button type="button" @click="sendVerificationCode" :disabled="isCountdown"
                                    class="!rounded-button whitespace-nowrap px-6 py-3 bg-blue-500 text-white hover:bg-blue-600 transition-all duration-200 flex items-center justify-center min-w-[120px]">
                                    <i class="iconfont icon-zhifeiji mr-2"></i>
                                    {{ isCountdown ? `${countdown} 秒后重试` : '获取验证码' }}
                                </button>
                            </div>
                        </div>

                        <!-- 新密码 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">新密码</label>
                            <div class="relative">
                                <div class="absolute left-4 top-1/2 transform -translate-y-1/2">
                                    <i class="iconfont icon-mima" style="font-size: 1rem;"></i>
                                </div>
                                <input v-model="formData.password" :type="passwordVisible ? 'text' : 'password'"
                                    class="w-full pl-12 pr-12 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-200"
                                    placeholder="请输入 6-16 位数字或字符" />
                                <i class="iconfont icon-BasicIcons-all- absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-gray-600"
                                    @click="togglePasswordVisibility"></i>
                            </div>
                            <div class="mt-2 text-xs text-gray-500 flex items-center">
                                <i class="iconfont icon-jinggao mr-1" style="font-size: 1rem;"></i>
                                密码须包含字母和数字，长度在 6-16 位之间
                            </div>
                        </div>

                        <!-- 确认新密码 -->
                        <div>
                            <label class="block text-sm font-medium text-gray-700 mb-2">确认新密码</label>
                            <div class="relative">
                                <!-- 图标部分 -->
                                <div class="absolute left-4 top-1/2 transform -translate-y-1/2">
                                    <i class="iconfont icon-mima" style="font-size: 1rem;"></i>
                                </div>

                                <!-- 密码输入框 -->
                                <input v-model="formData.confirmPassword" 
                                    :type="confirmPasswordVisible ? 'text' : 'password'"
                                    class="w-full pl-12 pr-12 py-3 border border-gray-200 rounded-lg focus:ring-2 focus:ring-blue-400 focus:border-transparent transition-all duration-200"
                                    placeholder="请再次输入密码" @blur="validatePasswords"/>

                                <!-- 显示/隐藏密码的图标 -->
                                <i class="iconfont icon-BasicIcons-all- absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-400 cursor-pointer hover:text-gray-600"
                                    @click="toggleConfirmPasswordVisibility"></i>
                                    <p v-if="errors.confirmPassword" class="text-red-500 text-sm mt-1">{{ errors.confirmPassword
                                }}</p>
                            </div>
                        </div>

                        <!-- 提交按钮 -->
                        <button type="submit"
                            class="!rounded-button whitespace-nowrap w-full py-4 bg-blue-500 text-white hover:bg-blue-600 transition-all duration-200 text-lg font-medium mt-8 flex items-center justify-center"
                            @click="onSubmit">
                            <i class="iconfont icon-duigouxiao mr-2"></i>
                            确认重置
                        </button>


                        <!-- 返回登录 -->
                        <div class="text-center mt-6 flex items-center justify-center">
                            <a href="#" @click.prevent="goToLogin"
                                class="text-gray-500 hover:text-blue-500 transition-colors flex items-center">
                                <i class="iconfont icon-zuojiantou mr-2"></i>
                                返回登录
                            </a>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router'; // 引入 useRouter

// 获取路由对象
const router = useRouter();

const formData = ref({
    email: '',
    verificationCode: '',
    password: '',
    confirmPassword: ''
});

// 表单错误提示
const errors = ref({
    account: '',
    password: '',
    confirmPassword: '',
    email: ''
});
// 校验密码一致性
function validatePasswords() {
    if (formData.value.password !== formData.value.confirmPassword) {
        errors.value.confirmPassword = '两次输入的密码不一致';
    } else {
        errors.value.confirmPassword = '';
    }
}

const isCountdown = ref(false);
const countdown = ref(60);

// 控制输入密码框显示/隐藏
const passwordVisible = ref(false);
// 切换密码显示/隐藏
function togglePasswordVisibility() {
  passwordVisible.value = !passwordVisible.value;
}

// 控制确认密码框显示/隐藏
const confirmPasswordVisible = ref(false);
// 切换密码显示/隐藏
function toggleConfirmPasswordVisibility() {
    confirmPasswordVisible.value = !confirmPasswordVisible.value;
}

const sendVerificationCode = () => {
    const email = formData.value.email;
    if (!email) {
        alert('请输入邮箱地址');
        return;
    }
    if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email)) {
        alert('请输入有效的邮箱地址');
        return;
    }
    isCountdown.value = true;
    const interval = setInterval(() => {
        if (countdown.value <= 0) {
            clearInterval(interval);
            isCountdown.value = false;
            countdown.value = 60;
        } else {
            countdown.value--;
        }
    }, 1000);
};

const handleSubmit = () => {
    const { email, verificationCode, password, confirmPassword } = formData.value;
    if (!email || !verificationCode || !password || !confirmPassword) {
        alert('请填写所有必填项');
        return;
    }
    if (password !== confirmPassword) {
        alert('两次输入的密码不一致');
        return;
    }
    if (!/[a-zA-Z]/.test(password) || !/[0-9]/.test(password) || password.length < 6 || password.length > 16) {
        alert('密码必须包含字母和数字，长度在 6-16 位之间');
        return;
    }
    console.log('提交表单', { email, verificationCode, password, confirmPassword });
    onSubmit();
};

const isLoading = ref(false);
//确认重置按钮
const onSubmit = async () => {
    isLoading.value = true;
    try {       
        const data = await updatePassword(formData.value.email);
        if (data.data.code === 200) {
            ElMessage.success('修改成功！');
            router.push('/login');
        } else {
            ElMessage.error('修改失败！' + data.data.message);
            console.log('修改失败');
        }
    } catch (error) {
        ElMessage.error('修改失败！' + error.message);
        console.error(error);
    } finally {
        isLoading.value = false;
    }
};

// 跳转到登录页的方法
const goToLogin = () => {
    console.log(11111)
    router.push('/login');
}
</script>
  
<style scoped>
.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }

    100% {
        transform: translateY(0px);
    }
}

.gradient-bg {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
}

.input-icon {
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

/* 设置页面容器宽度为 100vw 和高度为 100vh，保证页面大小与浏览器同步 */
.full-screen-container {
    width: 100vw;
    /* 浏览器窗口的宽度 */
    height: 100vh;
    /* 浏览器窗口的高度 */
    background-color: #3a88bc;
    /* 可以选择合适的背景色 */
    margin: 0;
    /* 去除默认的外边距 */
    padding: 0;
    /* 去除默认的内边距 */
}

/* 如果有特定的样式应用于 .body，可以考虑调整 */
.body {
    width: 100%;
}
</style>
  